<template>
  <div class="container">
    <slot name="label"></slot>
    <div class="wei-wrap">
      <div
        class="wei-upload-wrap"
        :style="{ 'border': imgUrl ? 'none' : '1px dashed #d9d9d9','min-width':inputWidth + 'px', 'min-height' : inputHeight + 'px'}"
      >
        <i class="el-icon-plus" v-if="!imgUrl"></i>
        <label for="wei">
          <img v-if="imgUrl" :src="imgUrl">
        </label>
        <input
          v-if="isUpload"
          type="file"
          class="wei-upload-file"
          @change="weiUpload"
          accept="image/png, image/jpg, image/jpeg, image/bmp"
        >
      </div>
      <slot name="tips"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "inputUpload",
  props: {
    imgUrl: {
      default: ""
    },
    inputWidth: {
      default: 150
    },
    inputHeight: {
      default: 150
    },
    isUpload: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    weiUpload(val) {
      let reader = new FileReader();
      let files = val.target.files;
      if (files[0]) {
        reader.readAsDataURL(files[0]);
        reader.onload = () => {
          let imgUrl = reader.result;
          this.$emit("weiUpload", files[0], imgUrl);
        };
      }
    }
  }
};
</script>

<style lang="scss">
.wei-wrap {
  display: flex;
  margin-top: 10px;
  align-items: center;
  overflow: hidden;
}
.wei-upload-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  margin-right: 20px;
  &:hover {
    border-color: #e6a23c;
  }
  label {
    position: absolute;
    z-index: 2;
    height: 100%;
    img {
      width: initial;
      height: 100%;
    }
  }
  .el-icon-plus {
    font-size: 26px;
    color: #909399;
  }
}
.wei-upload-file {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}
</style>
